import { watch, nextTick } from 'vue';
import * as storage from '@/util/storage.js';
import { makeFileIdValid } from '@/util/index.js';
import { CustomToQues, LabelFromStorableOf, SrcFromStorableOf, storePkgInfo } from './pkg-state.js';
import { typing } from '../obj-detn/api/use-shortcut-key.js';
import { setIndex } from './api/use-switch-index.js';

/**
 * 加载并处理必要数据
 * @param {{ getFileList: Function; } & Pick<ImgSegmnt.Ctx, 'ques' | 'quesIndex' | 'classes' | 'labelColorDic' | 'quesList'>} ctx
 */
export function InitAppOf(ctx) {
  /** @param {ImgSegmnt.PkgInfo} pkgInfo 记录进入标注页前所点击的，数据详情页的用户、题包和题 id */
  return async function(pkgInfo) {
    ctx.loading.value = true;
    const fileList = await ctx.getFileList(pkgInfo);
    const newPkgInfo = makeFileIdValid(pkgInfo, fileList);
    storage.writeAsStr('pkgInfo', newPkgInfo);
    
    /** @type {function(ImgSegmnt.Ques): string} */
    const Tex = R.compose( R.concat($config.urlDic.video), R.prop('fileUrl') );
    ctx.srcs.value = R.map(Tex, fileList);
    ctx.srcs.value = R.map(R.concat($config.urlDic.video), [
      "/2024-08-22-19-11-22/a14cd7ac-e775-4975-a5a9-3c21e1edacae_up_192_168_100_83_554_main_2024-08-22_18-05-23-0.mp4",
      "/2024-08-22-19-11-22/ee8f5fde-d32f-4642-a3c0-872ccbb1b2af_up_192_168_100_97_554_main_2024-08-22_18-05-24-0.mp4",
      "/2024-08-22-19-11-22/8d27d12a-b610-42a2-9720-5bfd946788b6_up_192_168_100_87_554_main_2024-08-22_18-05-24-0.mp4",
      "/2024-08-22-19-11-22/2e5e2ed0-4dc3-4bf8-96d1-9d1f2ab014d1_up_192_168_100_93_554_main_2024-08-22_18-05-24-0.mp4",
      "/2024-08-22-19-11-22/9d459701-9e1a-4630-ba97-a9e962cde4e2_up_192_168_100_85_554_main_2024-08-22_18-05-24-0.mp4",
      "/2024-08-22-19-11-22/e754cbcb-0262-4ca6-a298-3d8c0a17e313_up_192_168_100_95_554_main_2024-08-22_18-05-24-0.mp4",
      "/2024-08-22-19-11-22/9841ee76-a427-4ba2-886d-36652a8884b9_up_192_168_100_89_554_main_2024-08-22_18-05-24-0.mp4",
      "/2024-08-22-19-11-22/e2db9be0-f9e5-472e-90b7-72aeb7ababaf_up_192_168_100_91_554_main_2024-08-22_18-05-24-0.mp4",
      "/2024-08-22-19-11-22/0e7c1f32-e6fc-4aa4-aa14-816b17321ae7_up_192_168_100_81_554_main_2024-08-22_18-08-05-0.mp4",
      "/2024-08-22-19-11-22/385c46e9-6097-4e13-a4a6-d5dbac8c0c42_up_192_168_100_83_554_main_2024-08-22_18-08-05-0.mp4",
      "/2024-08-22-19-11-22/326eedac-45f7-4b3b-96fa-28e608760964_up_192_168_100_97_554_main_2024-08-22_18-08-05-0.mp4",
      "/2024-08-22-19-11-22/7154f4f8-c373-41ba-9671-a760ef0c34c1_up_192_168_100_87_554_main_2024-08-22_18-08-05-0.mp4",
      "/2024-08-22-19-11-22/1ef02fee-afb6-41de-9156-ffd184308f96_up_192_168_100_93_554_main_2024-08-22_18-08-05-0.mp4",
      "/2024-08-22-19-11-22/2f70a4fd-1de7-4c49-92bc-0a462f0a2854_up_192_168_100_85_554_main_2024-08-22_18-08-05-0.mp4",
      "/2024-08-22-19-11-22/30b21c03-ffec-40ca-b0e6-6310719d38fc_up_192_168_100_95_554_main_2024-08-22_18-08-05-0.mp4",
      "/2024-08-22-19-11-22/c1cb8c23-e6ac-44ea-9522-e38633256cbc_up_192_168_100_89_554_main_2024-08-22_18-08-05-0.mp4",
      "/2024-08-22-19-11-22/5ca9a1c2-eb98-4fe5-a278-096e57b7bb92_up_192_168_100_91_554_main_2024-08-22_18-08-05-0.mp4",
      "/2024-08-22-19-11-22/b69829d6-9f24-4462-9b70-0c95dd153473_up_192_168_100_81_554_main_2024-08-22_18-10-28-0.mp4",
      "/2024-08-22-19-11-22/e2fb3f79-68f1-4a94-8734-f918d68b79ce_up_192_168_100_83_554_main_2024-08-22_18-10-28-0.mp4",
      "/2024-08-22-19-11-22/b5f84bb3-86b2-4b89-ac23-187105cdcf4a_up_192_168_100_97_554_main_2024-08-22_18-10-28-0.mp4",
    ]);
    ctx.quesIndex.value = R.findIndex(R.propEq(newPkgInfo.ques, 'id'), fileList);
    ctx.quesList.value = fileList.map(
      CustomToQues({
        Src: SrcFromStorableOf(ctx),
        Label: LabelFromStorableOf(ctx),
      })
    );
    
    // ctx.ques.value.assignedLabels.annotation.video.src = Tex(fileList[ctx.quesIndex.value]);
    // console.log(ctx.ques.value.assignedLabels.annotation.video.src);
    
    ctx.loading.value = false;
  };
};

/**
 * 所有变量函数聚集在此大联欢
 * @param {ImgSegmnt.Ctx} ctx 
 */
export async function DataLabel(ctx) {
  await ctx.initApp(storage.readAsObj('pkgInfo'));

  ctx.listenShortcutKey();

  ctx.addAllowDefault(() => ctx.kbdModalProps.value.visible);
  ctx.addPreCond(() => !ctx.kbdModalProps.value.visible);

  watch(ctx.ques, (value, oldValue) => {
    ctx.saveFile(oldValue);
    storePkgInfo(value);
    ctx.stop();

    // 触发 loadeddata 毕竟要等，就写在这儿吧
    ctx.annotationState.value.keyframeList = [];
  });

  // 判定题目中的标注是否修改过
  watch(
    ctx.layers,
    (newXs, oldXs) => {
      // 同一题内增删改或换题后自动追加的即为改过
      nextTick()
      .then(() => {
        ctx.changed.value = newXs == oldXs;
      });
    },
    { deep: true }
  );

  // 基础功能：换题、播放 / 暂停
  ctx.addShortcutKey(['a'], () => setIndex(ctx.quesIndex, 'prev'), () => ctx.quesSwitchable.value.prev);
  ctx.addShortcutKey(['d'], () => setIndex(ctx.quesIndex, 'next'), () => ctx.quesSwitchable.value.next);

  R.compose( R.forEach(ctx.addAllowDefault), R.map(R.propEq(R.__, 'key', R.__)) )(['F5', 'F11', 'F12']);

  ctx.addAllowDefault(typing);
  ctx.addPreCond(R.complement(typing));

  const permsFns = ctx.addPerms({
    '标注': [
      () => {
        // pkg-state
        ctx.addShortcutKey(['s', 'ctrl'], () => ctx.saveFile(ctx.ques.value));
      },
    ],
    '审核': [
      () => {
        ctx.addShortcutKey(['g'], ctx.judgePassQues);
        ctx.addShortcutKey(['h'], ctx.handleReject);
      },
    ],
  });
  
  permsFns();
}
